<template>
	<view class="contain">
		<view class="noneImg" v-if="hasList">
			<!-- <image src="../../static/static/null.png" mode="widthFix"></image> -->
		</view>
		<view class="articleItem" v-for="(item,index) in articleMsg" :key="index" @click="navTo(item.Id)">
			<view class="topBox">
				<view class="articleImg">
					<image :src="item.CoverImg" mode=""></image>
				</view>
				<view class="articleContain">
					<view class="articleName">{{item.Title}}</view>
					<view class="articleContainBox">{{item.Tags}}</view>
					<view class="timeAndRead">
						<!-- <image src="../../static/static/time.png" mode=""></image> -->
						<text>{{item.AddTime}}</text>
					</view>
				</view>
			</view>
			<view class="bottomBox">
				<text>查看详情</text>
				<image src="../../static/images/35.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getHomeMsg,getChildren } from '@/api/homePage.js'
	import Config from '@/config/index.js'
	export default{
		data(){
			return{
				//文章数据
				articleMsg:[],
				Index:1,
				Size:8,
				Id:'',
				hasList:false
			}
		},
		methods:{
			navTo(e){
				uni.navigateTo({
					url:`/usercenter_subpages/detail/touristDetail?id=${e}`
				})
			},
			async getList(id,index){
				try{
					uni.showLoading({
						title:'加载中...'
					})
					const { Data } = await getChildren({
						ArticleCategoryId: id,
						Index: index,
						Size: this.Size,
					});
					//console.log(Data)
					uni.hideLoading()
					if(Data.length==0){
						if(index==1){
							this.hasList=true;
						}
						uni.showToast({
							title:'没有更多了~',
							icon:'none'
						})
					}else{
						Data.forEach((item)=>{
							item.AddTime=item.AddTime.replace('T',' ');
						});
						if(index==1){
							this.articleMsg=Data;
						}else{
							this.articleMsg=[...this.articleMsg,...Data];
						}
					}	
				}catch{
					
				}
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.Id=option.id;
			this.getList(this.Id,this.Index);
		},
		//加载更多
		onReachBottom() {
			this.Index++;
			this.getList(this.Id,this.Index);
		},
	}
</script>

<style lang="scss" scoped>
	.contain{
		width: 100%;
		padding: 20rpx 40rpx 80rpx;
		min-height: 94vh;
		.articleItem{
			width: 100%;
			height: 340rpx;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 40rpx 40rpx 0;
			box-shadow: 0 0 20rpx 1rpx rgba($color: #000000, $alpha: .1);
			margin-bottom: 40rpx;
			.topBox{
				display: flex;
				justify-content: space-between;
				padding-bottom: 40rpx;
				border-bottom: 1px solid #f5f5f5;
				.articleImg{
					width: 240rpx;
					height: 180rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.articleContain{
					width: 330rpx;
					height: 180rpx;
					.articleName{
						font-size: 32rpx;
						height: 80rpx;
						font-weight: 600;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;  
						text-overflow: ellipsis;  
						display: -webkit-box;  
						-webkit-line-clamp: 2;    //文本一行显示
						-webkit-box-orient: vertical;  
					}
					.articleContainBox{
						height: 40rpx;
						font-size: 30rpx;
						color: #666;
						margin: 12rpx 0;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;  
						text-overflow: ellipsis;  
						display: -webkit-box;  
						-webkit-line-clamp: 1;    //文本一行显示
						-webkit-box-orient: vertical; 
					}
					.timeAndRead{
						display: flex;
						align-items: center;
						image{
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
						text{
							color: #999;
							font-size: 26rpx;
							margin-right: 30rpx;
						}
					}
				}
			}
			.bottomBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;
				color: #999;
				image{
					width: 15rpx;
					height: 15rpx;
				}
			}
		}
	}
	.noneImg{
		padding-top: 100rpx;
		text-align: center;
		image{
			width: 400rpx;
		}
	}
	
</style>
